<%@ page import="musgo.Artista" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">
		
		<title>Registro de Nuevo Usuario</title>
                
  <script>
  pw_min = 5; // caracteres minimos para validar
  pw_max = 20; // caracteres maximos para validar
  pw_invalid = 'red'; // color de password invalido
  pw_insecure = 'yellow'; // color de password valido pero inseguro
  pw_secure = 'green'; // color de password valido y seguro
  pw_validate = /^[a-z0-9]+$/i; // regexp para validar password

  document.onkeyup = function() {
   if (typeof pw_focus != 'undefined') {
    if (pw_focus.value.length < pw_min || pw_focus.value.length > pw_max) bcolor = pw_invalid;
    else if (!pw_validate.test(pw_focus.value)) bcolor = pw_invalid;
    else if (pw_focus.value.toLowerCase() == pw_focus.value || pw_focus.value.toUpperCase() == pw_focus.value) bcolor = pw_insecure;
    else if (/^[a-z]+$/i.test(pw_focus.value) || /^[0-9]+$/i.test(pw_focus.value)) bcolor = pw_insecure;
    else bcolor = pw_secure;
    pw_focus.style.backgroundColor = bcolor;
   }
  }
  window.onload = function() {
   var inputs = document.getElementsByTagName('input');
   for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'password') {
     inputs[i].onfocus = function() {
      pw_focus = this;
     }
     inputs[i].onblur = function() {
      delete pw_focus;
     }
    }
   }
  }
</script>
	</head>
	<body>
		<img id="top" src="/MusgoSoft/images/imgProyecto/top.png" alt="">


<!-- ------------------------------------------------------------------------------------------------- -->
	
	<div id="form_container2"> <!-- formulario registro nick pass -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_registro" class="appnitro"  method="post" action="create" enctype="multipart/form-data">
			<div class="form_description">
			<h2>REGISTRO MUSGO </h2>
			<p>Nick repetido o datos obligatorios equivocados  </p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del nick de 5 a 40 caracteres</small></p>
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del password de 5 a 40 caracteres</small></p>
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Nombre del Artista o Grupo </label>
		<div>
			<input id="element_3" name="nombre" class="element text medium" type="text" maxlength="255" value="${artistaInstance.nombre}"/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Email </label>
		<div>
			<input id="element_4" name="email" class="element text medium" type="text" maxlength="255" value="${artistaInstance.email}"/> 
		</div> <p class="guidelines" id="guide_1"><small>email@abcd.com</small></p>
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Pais </label>
		<div>
			<input id="element_5" name="pais" class="element text medium" type="text" maxlength="255" value="${artistaInstance.pais}"/> 
		</div> <p class="guidelines" id="guide_1"><small>Campo obligatorio</small></p>
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Ciudad </label>
		<div>
			<input id="element_6" name="ciudad" class="element text medium" type="text" maxlength="255" value="${artistaInstance.ciudad }"/> 
		</div> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Historia </label>
		<div>
			<textarea id="element_7" name="historia" class="element textarea small" value="${artistaInstance.historia }"></textarea> 
		</div> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Integrantes </label>
		<div>
			<textarea id="element_8" name="integrantes" class="element textarea small" value="${artistaInstance.integrantes }"></textarea> 
		</div> 
		</li>		<li id="li_9" >
		<label class="description" for="element_9">Foto </label>
		<div>
			<input id="element_9" name="imagenp" class="element file" type="file"/> 
		</div>  
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="registro" />
			    
				<g:actionSubmit value="Registrar" action="create" />
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario registro nick pass-->
<!-- ------------------------------------------------------------------------------------------ -->
	<img id="bottom" src="/MusgoSoft/images/imgProyecto/bottom501.png" alt="">		
	 	
	</body>
</html>
